<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Keywords" content="Nutz,Nutz是什么,Nutz下载,Nutz社区, Java框架,JavaWeb,Aop,ORM,Dubbo,JDK8, JavaEE,tomcat,jetty"/>
    <title>Hello, So NB!</title>
    <link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon"/>
    <link rel="stylesheet" href="css/element-ui-chalk.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element-ui-index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="16" :offset="4">
                    <el-menu :default-active="activeMenu" mode="horizontal" @select="menuChange">
                        <el-menu-item index="1">构筑中心</el-menu-item>
                        <el-menu-item index="2">关于NB</el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-row v-if="activeMenu == 1">
                <!--配置界面-->
                <el-col :span="16" :offset="4" v-show="!making">
                    <el-form ref="nb" :model="nb" label-width="100px">
                        <!--NB-->
                        <el-form-item label="NB版本">
                            <el-select v-model="nb.version" placeholder="请选择">
                                <el-option
                                        v-for="item in versionOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <!--packageName-->
                        <el-form-item label="顶层包名">
                            <el-input v-model="nb.packageName"></el-input>
                        </el-form-item>

                        <!--Nutz.MVC-->
                        <el-form-item label="Nutz.Mvc">
                            <el-switch v-model="nb.nutzmvc.enable"></el-switch>
                        </el-form-item>

                        <!--Nutz.Dao-->
                        <el-form-item label="Nutz.Dao">
                            <el-switch v-model="nb.nutzdao.enable"></el-switch>
                        </el-form-item>

                        <!--JETTY-->
                        <el-form-item label="Jetty">
                            <el-switch v-model="nb.jetty.enable"></el-switch>
                        </el-form-item>

                        <!--JDBC-->
                        <el-form-item label="Jdbc">
                            <el-switch v-model="nb.jdbc.enable"></el-switch>
                        </el-form-item>

                        <!--Redis-->
                        <el-form-item label="Redis">
                            <el-switch v-model="nb.redis.enable"></el-switch>
                        </el-form-item>

                        <!--Quartz-->
                        <el-form-item label="Quartz">
                            <el-switch v-model="nb.quartz.enable"></el-switch>
                        </el-form-item>

                        <!--WeChat-->
                        <el-form-item label="WeChat">
                            <el-switch v-model="nb.weixin.enable"></el-switch>
                        </el-form-item>

                        <!--Tomcat-->
                        <el-form-item label="Tomcat">
                            <el-switch v-model="nb.tomcat.enable"></el-switch>
                        </el-form-item>

                        <!--Undertow-->
                        <el-form-item label="Undertow">
                            <el-switch v-model="nb.undertow.enable"></el-switch>
                        </el-form-item>

                        <!--Dubbo-->
                        <el-form-item label="Dubbo">
                            <el-switch v-model="nb.dubbo.enable"></el-switch>
                        </el-form-item>

                        <!--Zbus-->
                        <el-form-item label="Zbus">
                            <el-switch v-model="nb.zbus.enable"></el-switch>
                        </el-form-item>

                        <!--Ngrok-->
                        <el-form-item label="Ngrok">
                            <el-switch v-model="nb.ngrok.enable"></el-switch>
                        </el-form-item>

                        <!--ShardingJdbc-->
                        <el-form-item label="ShardingJdbc">
                            <el-switch v-model="nb.shardingjdbc.enable"></el-switch>
                        </el-form-item>

                        <!--BeetlSql-->
                        <el-form-item label="BeetlSql">
                            <el-switch v-model="nb.beetlsql.enable"></el-switch>
                        </el-form-item>

                        <!--MongoDB-->
                        <el-form-item label="MongoDB">
                            <el-switch v-model="nb.mongo.enable"></el-switch>
                        </el-form-item>

                        <!--Shiro-->
                        <el-form-item label="Shiro">
                            <el-switch v-model="nb.shiro.enable"></el-switch>
                        </el-form-item>

                        <!--Beetl-->
                        <el-form-item label="Beetl">
                            <el-switch v-model="nb.beetl.enable"></el-switch>
                        </el-form-item>

                        <!--Thymeleaf-->
                        <el-form-item label="Thymeleaf">
                            <el-switch v-model="nb.thymeleaf.enable"></el-switch>
                        </el-form-item>

                        <!--Jedisque-->
                        <el-form-item label="Jedisque">
                            <el-switch v-model="nb.disque.enable"></el-switch>
                        </el-form-item>

                        <!--uflo2-->
                        <el-form-item label="uflo2">
                            <el-switch v-model="nb.uflo2.enable"></el-switch>
                        </el-form-item>

                        <!--urule-->
                        <el-form-item label="urule">
                            <el-switch v-model="nb.urule.enable"></el-switch>
                        </el-form-item>

                        <!--ureport-->
                        <el-form-item label="ureport">
                            <el-switch v-model="nb.ureport.enable"></el-switch>
                        </el-form-item>

                        <!--wkcache-->
                        <el-form-item label="wkcache">
                            <el-switch v-model="nb.wkcache.enable"></el-switch>
                        </el-form-item>
                        
                        <!--feign-->
                        <el-form-item label="feign">
                            <el-switch v-model="nb.feign.enable"></el-switch>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <!--配置清单-->
                <el-col :span="16" :offset="4" v-show="making">
                    <el-form label-width="100px">
                        <el-input :autosize="nbTextArea" type="textarea" v-model="nbJson"></el-input>
                    </el-form>
                    <div style="margin-top: 20px"></div>
                    <!--<el-progress type="circle" :percentage="makper"-->
                    <!--:status="makper == 100 ? 'success': ''"></el-progress>-->
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="makper"
                                 :status="makper == 100 ? 'success': ''"></el-progress>
                    <div style="margin-top: 20px"></div>
                    <el-button type="success" @click="downloadNB" v-show="done">点击下载</el-button>
                </el-col>
            </el-row>
            <el-row v-if="activeMenu == 2">
                <el-col :span="16" :offset="4">
                    有疑问? 来 <a href="https://nutz.cn">https://nutz.cn</a> 就可以了
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                activeMenu: '1',
                making: false,
                makper: 0,
                upload: false,
                done: false,
                nbTextArea: {minRows: 2, maxRows: 6},
                versionOptions: [{
                    label: "2.1.0",
                    value: "2.1.0"
                },{
                    label: "2.2-SNAPSHOT",
                    value: "2.2-SNAPSHOT"
                }
                ],
                nb: {
                    packageName: "io.nutz.demo",
                    version: "2.2-SNAPSHOT",
                    nutzmvc: {
                        enable: true
                    },
                    nutzdao: {
                        enable: true,
                        cache: false
                    },
                    jetty: {
                        enable: true,
                        port: 8080,
                        host: "127.0.0.1"
                    },
                    jdbc: {
                        enable: true,
                        url: "jdbc:h2:mem:~",
                        username: "root",
                        password: "root"
                    },
                    redis: {
                        enable: false
                    },
                    quartz: {
                        enable: false
                    },
                    weixin: {
                        enable: false
                    },
                    tomcat: {
                        enable: false,
                        port: 8080,
                        host: "127.0.0.1"
                    },
                    undertow: {
                        enable: false,
                        port: 8080,
                        host: "127.0.0.1"
                    },
                    dubbo: {
                        enable: false
                    },
                    zbus: {
                        enable: false
                    },
                    ngrok: {
                        enable: false,
                        client: {
                            auth_token: "4kg9lckq5og4ip02j736e3i7ku"
                        }
                    },
                    shardingjdbc: {
                        enable: false
                    },
                    beetlsql: {
                        enable: false
                    },
                    mongo: {
                        enable: false,
                        dbname: "nutzboot"
                    },
                    shiro: {
                        enable: false,
                    },
                    beetl: {
                        enable: false
                    },
                    thymeleaf: {
                        enable: false
                    },
                    disque: {
                        enable: false
                    },
                    uflo2: {
                        enable: false
                    },
                    urule: {
                        enable: false
                    },
                    ureport: {
                        enable: false
                    },
                    wkcache: {
                        enable: false
                    },
                    feign: {
                        enable: false
                    }
                },
                nbJson: "",
                nbUrl: ''
            }
        },
        methods: {
            menuChange(index) {
                this.activeMenu = index;
            },
            buildNB: function () {
                var self = this;
                self.upload = true;
                $.ajax({
                    url: "/maker/make",
                    type: "POST",
                    data: JSON.stringify(self.nb),
                    dataType: "json",
                    success: function (re) {
                        if (re && re.ok) {
                            self.upload = false;
                            self.nbUrl = "/maker/download/" + re.key;
                        } else {
                            self.$message.error('创建失败了，请到 https://nutz.cn 获取帮助');
                        }
                    }
                });
            },
            downloadNB: function () {
                var durl = this.nbUrl;
                console.log("DW: " + durl);
                window.open(durl);
                this.making = false;
                this.done = false;
                this.makper = 0;
            },
            onSubmit() {
                this.nbJson = JSON.stringify(this.nb, null, 2);
                this.making = true;
                this.buildNB();
                var self = this;
                var upInterval = setInterval(function () {
                    if (self.makper < 100) {
                        self.makper += 5;
                    } else {
                        if (!self.upload) {
                            window.clearInterval(upInterval);
                            self.makper = 100;
                            self.done = true;
                        } else {
                            self.makper = 10;
                        }
                    }
                }, 50);
            }
        }
    })
</script>
</html>